<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>record</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="HandheldFriendly" content="true">
   <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='bootstrap.min.css')}}">

   <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="/static/echarts.min.js"></script>
</head>
<body>
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:800%;margin-left:auto;margin-right:auto;"></div>
    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data1=({{ timecollect|safe}});
        var data2=({{profit}});
        var data3=({{net}});
        var data4=({{duo}});
        var data5=({{kong}});
        var data6=({{count}});
        var data0 = splitData({{closeprice|safe}});
        var data7 = splitData({{averagecloseprice|safe}});
        function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}
function formatDate(data) {
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var date = new Date(item[0].replace('-', '/'));
        item[0] = +date;
    }
    return data;
}
;
if (option && typeof option === "object") {
    var startTime = +new Date();
    myChart.setOption(option, true);
    var endTime = +new Date();
    var updateTime = endTime - startTime;
    console.log("Time used:", updateTime);
}

        // 指定图表的配置项和数据
        var option = {
            baseOption: {
        timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            top:50,
            data: ['平仓盈亏','成交量','最大多头持仓','最大空头持仓','交易人数','日K线','人均日K线']},
        calculable : true,
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'20%',
        containLabel: true
    },
           
    tooltip : {
        trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    toolbox: {
        show: true,
        
        feature: {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
            
        }
    },

            xAxis : [
        {
            type : 'category',

            data :data1.map(function (str) {
                return str.replace(' ', '\n')
            })
        }
    ],
        yAxis: [
        {
            
            type: 'value'
            
        }

    ],
           series: [
                { 
                    type: 'bar'
                    
                    

                }
            ]
            },
options:[{

           title:{text: '平仓盈亏',
           left:'center'},
            series:[{
            itemStyle:{normal:{color:'#9BCA63'}},
            
            name:'平仓盈亏',
            data:data2}]
        },
{

           title:{text: '成交量',
           left:'center'},
            series:[{
            itemStyle:{normal:{color:'#F0805A'}},
            name:'成交量',
            data:data3}]
        },
        {

           title:{text: '最大多头持仓',
           left:'center'},
            series:[{
            itemStyle:{normal:{color:'#91c7ae'}},
            name:'最大多头持仓',
            data:data5}]
        },
        {

           title:{text: '最大空头持仓',
           left:'center'},
            series:[{
            itemStyle:{normal:{color:'#C6E579'}},
            name:'最大空头持仓',
            data:data4}]
        },
        
        {

           title:{text: '交易人数',
           left:'center'},
            series:[{
           itemStyle:{normal:{color:'#F4E001'}},
            name:'交易人数',
            data:data6}]
        },
        {

           title:{text: '日K线',
           left:'center'},
            series:[{
            type: 'candlestick',
            data: data0.values,
            name:'日K线'}]
        },
        {

           title:{text: '人均日K线',
           left:'center'},
            series:[{
            type: 'candlestick',
            data: data7.values,
            name:'人均日K线'}]
        }
        
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
<table class="table table-bordered">
   <h2 class="text-center">{{k}}</h2>

   <button type="button" class="btn btn-info" style="position:absolute;top:8%;right:5%"><a href={{url_for('logout')}}>回到首页</a></button>
   <thead>
   
      <tr>
      
         <th>日期（姓名）</th>
         <th>平仓盈亏</th>
         <th>成交量</th>
         <th>最大多头持仓</th>
         <th>最大空头持仓</th>
         <th>最大盈亏</th>
         <th>最小盈亏</th>
         <th>交易员人数</th>
    
      </tr>
      
   </thead>
   
   
   <tbody>
      <tr>
      {% for entry in entries%}
         <td>{{ entry.date.decode("gbk")|safe }}</td>
         <td>{{entry.pingprofit}}</td>
         <td>{{entry.volume}}</td>
         <td>{{entry.maxduo}}</td>
         <td>{{entry.maxkong}}</td>
         <td>{{entry.maxprofit}}</td>
         <td>{{entry.minprofit}}</td>
         <td>{{entry.count}}</td>
      </tr>
{%endfor%}
   </tbody>

</table >

</body>
</html>